<template>
 <div>
   御剑乘风来,除魔天地间!===father=={{$store.state.count}}=={{count}}==age:{{age}}
  <hr>
  ==={{$store.getters.total}}===total:{{total}}==total:{{total}}
  <hr>
  <button @click="handle">mutaions+n</button>
  <button @click="handle2">actions+m</button>
   <button @click="moduleHandle">按钮+1===module--namespaced</button>

 </div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default{
    name:'',
    data () {
        return {
         obj:{
           n:10,
           m:5
         }
        }
    },
    created () {
    },
    computed:{
      ...mapState(['count','age']),
      ...mapGetters(['total'])
      
    },
    methods:{
      ...mapMutations(['changeHandel']),
      //  ...mapMutations('模块名', ['函数']),
      //  ...mapMutations('user', ['shandle']),
      //  ...mapMutations('setting', ['shandle']),
      ...mapActions(['asyncHandel']),
  
      handle(){
        console.log(this,9999)
        //方法一: 小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象
        // this.$store.commit('changeHandel',this.obj)
        //方法二:辅助函数** - mapMutations
        this.changeHandel(this.obj)
      },
      handle2(){
        // this.$store.dispatch('asyncHandel',this.obj)
        this.asyncHandel(this.obj)
      },
      moduleHandle(){
        this.$store.commit('user/shandle')
        this.$store.commit('setting/shandle')
      // this.shandle()
      }
    }
}
</script>
<style lang='less'  scoped>
    
</style>
